<template>
    <div class="pages">
        <div class="page-box">
            <div class="top-title">
                <div class="title">{{type|typeName}} </div>
            </div>
            <div class="form-box" v-if="type==1">
                <el-form :model="ruleForm"   :inline="true" label-width=" 120px" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                    <el-form-item label="基本信息" class="label-zi"> </el-form-item>
                    <el-form-item label="姓名:" prop="uname">
                        <el-input v-model="ruleForm.uname"></el-input>
                    </el-form-item>
                    <el-form-item label="编号：" prop="uname">
                        <el-input v-model="ruleForm.uname"></el-input>
                    </el-form-item>
                    <el-form-item label="入职时间：" prop="uname">
                        <el-date-picker v-model="ruleForm.uname" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期："> </el-date-picker>
                    </el-form-item>
                    <el-form-item label="部门：" prop="uname">
                        <el-select v-model="branch"  placeholder="请选择">
                            <el-option
                            v-for="item in branchList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="岗位：" prop="uname">
                        <el-select v-model="branch"  placeholder="请选择">
                            <el-option
                            v-for="item in branchList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="流程处理" class="label-zi"> </el-form-item>
                    <el-form-item label="抄送：" style="width:100%;display: flex;" prop="uname">
                        <el-input v-model="ruleForm.uname" >
                            <div class="right-icon" @click="dialogVisible=true" slot="append" title="选择人员"><i class="iconfont el-icon-user-solid"></i></div>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="即将流向：" style="width:100%;display: flex;" prop="uname">
                        <el-input v-model="ruleForm.uname"></el-input>
                    </el-form-item>
                    <el-form-item label="处理意见：" style="width:100%;display: flex;" prop="uname">
                        <el-input type="textarea" rows="4" placeholder="处理意见........" v-model="ruleForm.uname"></el-input>
                    </el-form-item>
                    <el-form-item label=" " style="width:100%;">
                        <div class="buttonWrap">
                            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                            <el-button @click="utils.backPage()">取消</el-button>
                            <el-button type="info">存草稿</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            <div class="form-box" v-if="type==2">
                <el-form :model="ruleForm"   :inline="true" label-width=" 120px" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                    <el-form-item label="基本信息" class="label-zi"> </el-form-item>
                    <el-form-item label="姓名：" prop="uname">
                        <el-input v-model="ruleForm.uname"></el-input>
                    </el-form-item>
                    <el-form-item label="编号：" prop="uname">
                        <el-input v-model="ruleForm.uname"></el-input>
                    </el-form-item>
                    <el-form-item label="离职时间：" prop="uname" style="width:100%;display: flex;">
                        <el-date-picker v-model="ruleForm.uname" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期："> </el-date-picker>
                    </el-form-item>
                    <el-form-item label="部门：" prop="uname">
                        <el-select v-model="branch"  placeholder="请选择">
                            <el-option
                            v-for="item in branchList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="岗位：" prop="uname">
                        <el-select v-model="branch"  placeholder="请选择">
                            <el-option
                            v-for="item in branchList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="离职原因" style="width:100%;display: flex;" prop="uname">
                        <el-input type="textarea" rows="4" placeholder="发放原因........" v-model="ruleForm.uname"></el-input>
                    </el-form-item>
                    <el-form-item label="流程处理" class="label-zi"> </el-form-item>
                    <el-form-item label="抄送：" style="width:100%;display: flex;" prop="uname">
                        <el-input v-model="ruleForm.uname" >
                            <div class="right-icon" @click="dialogVisible=true" slot="append" title="选择人员"><i class="iconfont el-icon-user-solid"></i></div>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="即将流向：" style="width:100%;display: flex;" prop="uname">
                        <el-input v-model="ruleForm.uname"></el-input>
                    </el-form-item>
                    <el-form-item label="处理意见：" style="width:100%;display: flex;" prop="uname">
                        <el-input type="textarea" rows="4" placeholder="处理意见........" v-model="ruleForm.uname"></el-input>
                    </el-form-item>
                    <el-form-item label=" " style="width:100%;">
                        <div class="buttonWrap">
                            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                            <el-button @click="utils.backPage()">取消</el-button>
                            <el-button type="info">存草稿</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            <div class="form-box" v-if="type==3">
                <el-form :model="ruleForm"   :inline="true" label-width=" 120px" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                    <el-form-item label="基本信息" class="label-zi"> </el-form-item>
                    <el-form-item label="姓名：" prop="uname">
                        <el-input v-model="ruleForm.uname"></el-input>
                    </el-form-item>
                    <el-form-item label="编号：" prop="uname">
                        <el-input v-model="ruleForm.uname"></el-input>
                    </el-form-item>
                    <el-form-item label="调动时间：" prop="uname">
                        <el-date-picker v-model="ruleForm.uname" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期："> </el-date-picker>
                    </el-form-item>
                    <el-form-item label="原部门："  prop="uname">
                        <el-input v-model="ruleForm.uname"></el-input>
                    </el-form-item>
                    <el-form-item label="岗位："  prop="uname">
                        <el-input v-model="ruleForm.uname"></el-input>
                    </el-form-item>
                     <el-form-item label="调入部门：" prop="uname">
                        <el-select v-model="branch"  placeholder="请选择">
                            <el-option
                            v-for="item in branchList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="调入岗位：" prop="uname">
                        <el-select v-model="branch"  placeholder="请选择">
                            <el-option
                            v-for="item in branchList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="调动原因：" style="width:100%;display: flex;" prop="uname">
                        <el-input type="textarea" rows="4" placeholder="调动原因........" v-model="ruleForm.uname"></el-input>
                    </el-form-item>
                    <el-form-item label="流程处理" class="label-zi"> </el-form-item>
                    <el-form-item label="抄送：" style="width:100%;display: flex;" prop="uname">
                        <el-input v-model="ruleForm.uname" >
                            <div class="right-icon" @click="dialogVisible=true" slot="append" title="选择人员"><i class="iconfont el-icon-user-solid"></i></div>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="即将流向：" style="width:100%;display: flex;" prop="uname">
                        <el-input v-model="ruleForm.uname"></el-input>
                    </el-form-item>
                    <el-form-item label="处理意见：" style="width:100%;display: flex;" prop="uname">
                        <el-input type="textarea" rows="4" placeholder="处理意见........" v-model="ruleForm.uname"></el-input>
                    </el-form-item>
                    <el-form-item label=" " style="width:100%;">
                        <div class="buttonWrap">
                            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                            <el-button @click="utils.backPage()">取消</el-button>
                            <el-button type="info">存草稿</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <el-dialog title="选择抄送人" :visible.sync="dialogVisible" width="30%">
            <div>
                <el-input placeholder="输入关键字进行搜索" v-model="filterText"> </el-input>
                <el-tree 
                    class="filter-tree" 
                    show-checkbox
                    node-key="id"
                    :data="data" 
                    :props="defaultProps" 
                    default-expand-all 
                    :filter-node-method="filterNode" 
                    ref="tree"> 

                </el-tree>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            type:1,     //1入职     2离职   3调动
            filterText: '',
            fileList: [{
            name: 'food.jpeg',
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
            }, {
            name: 'food2.jpeg',
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
            }],
            branch:"",
            branchList:[
                {
                    value: '技术部',
                    label: '技术部'
                },
                {
                    value: '设计部',
                    label: '设计部'
                },
                {
                    value: '销售部',
                    label: '销售部'
                },
            ],
            data: [{
                id: 1,
                label: '一级 1',
                children: [{
                    id: 4,
                    label: '二级 1-1',
                    children: [{
                    id: 9,
                    label: '三级 1-1-1'
                    }, {
                    id: 10,
                    label: '三级 1-1-2'
                    }]
                }]
                }, {
                    id: 2,
                    label: '一级 2',
                    children: [{
                        id: 5,
                        label: '二级 2-1'
                    }, {
                        id: 6,
                        label: '二级 2-2'
                    }]
                }, {
                id: 3,
                label: '一级 3',
                children: [{
                    id: 7,
                    label: '二级 3-1'
                }, {
                    id: 8,
                    label: '二级 3-2'
                }]
            }],
            defaultProps: {
            children: 'children',
            label: 'label'
            },
            dialogVisible:false,//选中人员
            ruleForm:{
                uname:'',
            },
            rules: {
                uname: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
            }
        }
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    filters:{
        typeName(val){ //1入职     2离职   3调动
            switch (Number(val)) {
                case 1:
                    val = '入职单'
                    break;
                case 2:
                    val = '离职单'
                    break;
                case 3:
                    val = '调动单'
                    break;
            }
            return val;
        }
    },
    created(){
        let {type} = this.$route.query;
        if(type){
            this.type=type
        }
    },
    methods:{
        handleChange(file, fileList) {
            this.fileList = fileList.slice(-3);
        },
        filterNode(value, data) {//摘抄人搜索
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        submitForm() {
            this.$refs.ruleForm.validate((valid) => {
                if (!valid) return;

            });
        },
    }
};
</script>

<style lang="scss" scoped>
.pages{
    .page-box{
        background: #fff;
        border-radius: 8px;
        padding: 0 24px 20px;
        .top-title{
            padding: 20px 0;
            border-bottom: 1px solid #c2c1c1;
            position: relative;
            .title{
                font-size: 30px;
                text-align: center;
                color: #555555;
            }
            .right-btn{
                top: 20px;
                right: 0;
                position: absolute;
            }
        }
        .form-box{
            padding: 20px;
            .right-icon{
                cursor: pointer;
                padding: 0 20px;
                height: 100%;
            }
            .label-zi{
                width: 100%;
                display: flex;
                margin-bottom: 30px;
                ::v-deep.el-form-item__label{
                    font-size: 18px;
                }
            }
            .file-box{
                .file{
                    display: flex;
                    min-width: 300px;
                    span{
                        margin-right: 50px;
                    }
                    .a-likn{
                        color: #1890FF;
                        cursor: pointer;
                        margin-left: 10px;
                    }
                }
            }
            ::v-deep{
                .el-form-item__content{
                    flex: 1;
                }
                .el-input-group__append{
                    padding: 0;
                }
                .el-form-item__content{
                    margin: 0 auto;
                }
            }
        }
    }
}
.buttonWrap{
    .el-button{
        margin: 0 10px;
    }
}
.el-tree{
    margin-top: 30px;
}
</style>